<template>
  <div class="homePage">
    <Homeheader></Homeheader>
    <van-tabs v-model="active" background="#ccc" sticky>
      <van-tab
        :title="category.name"
        v-for="category in categoryList"
        :key="category.id"
      >
        <PostItem :category="category" />
      </van-tab>
    </van-tabs>
    <div class="option" @click="$router.push('/column')">
      <van-icon name="wap-nav" />
    </div>
    <!-- <PostItem  :postData='post' v-for="post in postList"/> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: localStorage.getItem("token") ? 1 : 0,
      categoryList: [],
    };
  },
  components: {
    Homeheader: () => import("../components/Homeheader"),
    PostItem: () => import("../components/PostItem"),
  },
  created() {
    // 如果本地有activeList数据这直接使用 无需请求
    if (localStorage.getItem("activeList")) {
      let newActiveList = JSON.parse(localStorage.getItem("activeList"));
      let newActiveList2 = newActiveList.map((item) => {
        return {
          ...item,
          myList: [],
          pageIndex: 1,
          pageSize: 6,
          loading: false,
          finished: false,
        };
      });
      newActiveList2.push({
        name: "aa",
      });
      this.categoryList = newActiveList2;
    } else {
      //获取分类详情
      this.$axios({
        url: "/category",
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          console.log(res);
          this.categoryList = res.data.data.map((item) => {
            return {
              ...item,
              myList: [],
              pageIndex: 1,
              pageSize: 6,
              loading: false,
              finished: false,
            };
          });
          console.log("aaa", this.categoryList);
        }
      });
    }
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.homePage {
  position: relative;
  .option {
    position: absolute;
    width: 52/360 * 100vw;
    height: 44/360 * 100vw;
    font-size: 25/360 * 100vw;
    top: 50/360 * 100vw;
    background-color: #ccc;
    text-align: center;
    line-height: 44/360 * 100vw;
    right: 0;
    color: #646566;
  }
}
</style>